<template>
  <a-layout class="dashboard">
    <a-layout-header class="header">
      <h1 style="color: white; margin: 0;">我的应用</h1>
    </a-layout-header>
    <a-layout-content class="main-content">
        <a-menu mode="horizontal" :default-selected-keys="['1']" style="margin-bottom: 16px;">
          <a-menu-item v-if="hasPermission('all')" key="permissions" @click="showPermissions">权限</a-menu-item>
          <a-menu-item key="about" @click="showAbout">关于</a-menu-item>
          <a-menu-item key="theme" @click="toggleTheme">主题切换</a-menu-item>
          <a-menu-item key="logout" @click="logout">登出</a-menu-item>
          <a-sub-menu key="business" title="业务">
            <a-menu-item key="order" @click="showOrder">报单</a-menu-item>
            <a-menu-item key="cancelOrder" @click="showCancelOrder">撤单</a-menu-item>
          </a-sub-menu>
        </a-menu>
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <!-- 左侧路由视图 -->
          </a-col>
          <a-col :span="12">
            <!-- 右侧路由视图 -->
          </a-col>
        </a-row>
      </a-layout-content>
    <a-layout-footer class="footer">
      <p>版权所有 &copy; 2024</p>
    </a-layout-footer>
  </a-layout>
</template>

<script>
import { Layout, Menu, Row, Col } from 'ant-design-vue';

export default {
  name: 'Dashboard',
  data() {
    return {
      showSubMenu: false,
      permissions: []
    };
  },
  async created() {
    try {
      const response = await axios.get('http://localhost:5000/permissions', {
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`
        }
      });
      this.permissions = response.data;
    } catch (error) {
      console.error('获取权限失败', error);
    }
  },
  methods: {
    hasPermission(permission) {
      return this.permissions.includes(permission);
    },
    showPermissions() {
      this.$router.push('/permissions');
    },
    showAbout() {
      // 实现关于页面逻辑
    },
    toggleTheme() {
      // 实现主题切换逻辑
    },
    logout() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    },
    showOrder() {
      // 实现报单页面逻辑
    },
    showCancelOrder() {
      // 实现撤单页面逻辑
    }
  }
};
</script>

<style scoped>
.dashboard {
  height: 100vh;
}
.header {
  padding: 0 24px;
}
.main-content {
  padding: 24px;
  background: #fff;
}
</style>
<style scoped>
.dashboard {
  height: 100vh;
}
.header {
  padding: 0 24px;
}
.main-content {
  padding: 24px;
  background: #fff;
}
</style>